let options;
let client;
let connectioning = false;
let host = document.getElementById("host");
let port = document.getElementById("port");
let path = document.getElementById("path");
let username = document.getElementById("username");
let passwd = document.getElementById("passwd");
let pub_topic = document.getElementById("pub_topic");
let pub_payload = document.getElementById("pub_payload");
let pub_qos = document.getElementById("pub_qos");
let sub_topic = document.getElementById("sub_topic");
let sub_qos = document.getElementById("sub_qos");
function connection() {
  if (
    host.value == "" ||
    port.value == "" ||
    host.value == " " ||
    port.value == " "
  ) {
    window.alert("主机地址和端口不能为空");
    return;
  }
  options = {
    clientId: "zyy_ws" + Math.random().toString(16).substr(2, 8),
    username: username.value,
    password: passwd.value,
  };
  console.log("ws://" + host.value + ":" + port.value + path.value);
  try {
    client = mqtt.connect("ws://" + host.value + ":" + port.value + path.value);
    document.getElementById("on").setAttribute("disabled", "disabled");
    document.getElementById("info").innerHTML = "连接中";
    document.getElementById("info").style.color = "orange";
    connectioning = true;
    setTimeout(function () {
      if (connectioning == true) {
        window.alert("连接超时");
        document.getElementById("info").innerHTML = "连接超时";
        document.getElementById("info").style.color = "red";
        document.getElementById("on").removeAttribute("disabled");
        connectioning = false;
        client.end();
      }
    }, 5000);
    client.on("connect", function () {
      connectioning = false;
      document.getElementById("info").innerHTML = "连接成功";
      document.getElementById("info").style.color = "green";
      document.getElementById("off").removeAttribute("disabled");
      document.getElementById("pub_button").removeAttribute("disabled");
      document.getElementById("sub_on_button").removeAttribute("disabled");
      document.getElementById("host").setAttribute("disabled", "disabled");
      document.getElementById("port").setAttribute("disabled", "disabled");
      document.getElementById("path").setAttribute("disabled", "disabled");
      document.getElementById("username").setAttribute("disabled", "disabled");
      document.getElementById("passwd").setAttribute("disabled", "disabled");
    });
  } catch (err) {
    window.alert("连接失败\nError_MSG: " + err);
    document.getElementById("info").innerHTML = "连接失败";
    document.getElementById("info").style.color = "red";
  }
}
function disconnect() {
  connectioning = false;
  document.getElementById("info").innerHTML = "未连接";
  document.getElementById("info").style.color = "blue";

  document.getElementById("on").removeAttribute("disabled");

  document.getElementById("off").setAttribute("disabled", "disabled");
  document.getElementById("pub_button").setAttribute("disabled", "disabled");
  document.getElementById("sub_on_button").setAttribute("disabled", "disabled");
  document
    .getElementById("sub_off_button")
    .setAttribute("disabled", "disabled");

  document.getElementById("host").removeAttribute("disabled");
  document.getElementById("port").removeAttribute("disabled");
  document.getElementById("path").removeAttribute("disabled");
  document.getElementById("username").removeAttribute("disabled");
  document.getElementById("passwd").removeAttribute("disabled");
}
function pub() {
  if (
    pub_topic.value == "" ||
    pub_payload.value == "" ||
    pub_topic.value == " " ||
    pub_payload.value == " "
  ) {
    window.alert("Topic 和 Payload 不能为空");
    return;
  }
  let pub_options = {
    qos: parseInt(pub_qos.value),
  };
  try {
    client.publish(pub_topic.value, pub_payload.value, pub_options, (e) => {
      let oTr = document.getElementById("pub_Tb1").insertRow(1);
      let aText = [];
      aText.push(document.createTextNode(pub_topic.value));
      aText.push(document.createTextNode(pub_payload.value));
      aText.push(document.createTextNode(pub_qos.value));
      for (let i = 0; i < aText.length; i++) {
        let oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
      }
    });
  } catch (err) {
    window.alert("发送消息失败\nError_MSG: " + err);
  }
}
function sub_on() {
  /* 省略重新建立连接的过程 */
  if (sub_topic.value == "" || sub_topic.value == " ") {
    window.alert("Topic 不能为空");
    return;
  }
  let sub_option = {
    qos: parseInt(sub_qos.value),
  };
  client.subscribe(sub_topic.value, sub_option, (err, granted) => {
    if (!err) {
      console.log(granted);
      document.getElementById("sub_qos").setAttribute("disabled", "disabled");
      document.getElementById("sub_topic").setAttribute("disabled", "disabled");
      document
        .getElementById("sub_on_button")
        .setAttribute("disabled", "disabled");
      document.getElementById("sub_off_button").removeAttribute("disabled");
    } else {
      window.alert("订阅失败\nError_MSG: " + err);
    }
  });
  client.on("message", (topic, payload, packet) => {
    console.log(packet);
    let oTr = document.getElementById("sub_Tb1").insertRow(1);
    let aText = [];
    aText.push(document.createTextNode(topic));
    aText.push(document.createTextNode(payload));
    aText.push(document.createTextNode(packet.qos));
    for (let i = 0; i < aText.length; i++) {
      let oTd = oTr.insertCell(i);
      oTd.appendChild(aText[i]);
    }
  });
}
function sub_off() {
  client.unsubscribe(sub_topic.value, (err) => {
    if (err) {
      window.alert("取消订阅失败\nError_MSG: " + err);
    }
    document.getElementById("sub_qos").removeAttribute("disabled");
    document.getElementById("sub_topic").removeAttribute("disabled");
    document.getElementById("sub_on_button").removeAttribute("disabled");
    document
      .getElementById("sub_off_button")
      .setAttribute("disabled", "disabled");
  });
}
